document.addEventListener('DOMContentLoaded', function () {
    // 定义数据结构
    const introduce = [
        {
            name: "黄鹤楼",
            txt: "黄鹤楼（Yellow Crane Tower），位于湖北武汉武昌长江南岸蛇山峰岭之上。始建于三国时代吴黄武二年（公元223年），历代屡建屡毁，今天看到的黄鹤楼，是1985年重建的。黄鹤楼是国家5A级景点，享有“天下绝景” 、“天下江山第一楼”之称，是武汉的城市地标之一，因唐代诗人崔颢“昔人已乘黄鹤去，此地空余黄鹤楼”的诗句而名扬天下，李白等都为黄鹤楼留下了诗词。登上黄鹤楼远眺，可以看到滚滚长江和武汉三镇风光。",
            img: "./images/index-jd-1.jpg",
        },
        {
            name: "晴川阁",
            txt: `晴川阁，得名于唐朝诗人崔颢“晴川历历汉阳树，芳草萋萋鹦鹉洲"”诗句。景区由晴川阁、禹稷行宫、铁门关三大主体建筑和禹碑亭、荆楚雄风碑以及牌楼、临江驳岸、曲径回廊等十几处附属的小景点组成，再现了楚人依山就势筑台，台上建楼阁的风貌。景区内亭台楼阁，绿树成荫，是武汉当地人拍摄婚纱照的热门地。`,
            img: "./images/index-jd-2.png",
        },
    ];

    const character = {
        name: "武汉",
        txt1: `‌武汉‌，简称“汉”，别称“江城”，是湖北省的省会城市，也是中国中部地区的中心城市。武汉地处江汉平原东部、长江中游，长江及其最大支流汉水在此交汇，形成了武汉三镇（武昌、汉口、汉阳）隔江鼎立的格局。全市总面积8569.15平方千米，2023年末常住人口为1377.40万人，全年地区生产总值为20011.65亿元。‌`,
        txt2: `武汉素有“九省通衢”之称，是中国内陆最大的水陆空交通枢纽和长江中游航运中心。其高铁网辐射大半个中国，可直航全球五大洲。自春秋战国以来，武汉一直是中国南方的军事和商业重镇，清末汉口开埠和洋务运动开启了武汉的现代化进程，使其成为近代中国重要的经济中心。武汉还是辛亥革命的首义之地，近代史上多次成为全国政治、军事、文化中心。`,
    };

    const imgArr = [
        "./images/index-jd-1.jpg",
        "./images/index-jd-1.jpg",
        "./images/index-jd-1.jpg",
    ];

    // 渲染“武汉介绍”部分
    const characterInfoDiv = document.getElementById('character-info');
    characterInfoDiv.innerHTML = `
    <div class="tit">${character.name}</div>
    <div class="desc">
      <p>${character.txt1}</p>
      <p>${character.txt2}</p>
    </div>
  `;

    // 渲染“景点介绍”部分
    const introduceListDiv = document.getElementById('introduce-list');
    introduce.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'item cl flex';
        itemDiv.innerHTML = `
      <div class="img"><img src="${item.img}" alt="" /></div>
      <div class="txt" style="width: 550px">
        <div class="tit">${item.name}</div>
        <div class="desc">${item.txt}</div>
      </div>
    `;
        introduceListDiv.appendChild(itemDiv);
    });

    // 渲染“精彩照片”部分
    console.log(introduce)
    const photoListDiv = document.getElementById('photo-list');
    imgArr.forEach((src, index) => {
        const itemDiv = document.createElement('div');
        itemDiv.className = `item fl${index === 2 ? ' margin-right-0' : ''}`;
        itemDiv.innerHTML = `<div class="img"><img src="${src}" alt="" /></div>`;
        photoListDiv.appendChild(itemDiv);
    });

});